<template>
<div>
  <!-- <div class="top"> <span class="back" @click="$router.back()">&lt;</span><div class="adress">地图找房</div> </div> -->
  <van-nav-bar
  title="地图找房"
  left-text="返回"
  left-arrow
  fixed
  @click-left="$router.back()"
/>
  <div id="container">

  </div>


  <van-popup close-icon="close"  v-model="show"  position="bottom" :style="{ height: '50%' }" >
    <div class="box">
      <span>房屋列表</span>
      <span class="more" @click="change">更多房源</span>
    </div>
    <div class="list">
    <houseItem  :list='houseDetails' ></houseItem>

    </div>
  </van-popup>
  </div>
</template>
 
<script>
import { getAreaHouse,getCommunity } from '@/api/area.js'
import { getHousesDetail } from '@/api/house.js'
import houseItem from '../findHouse/components/housesItem'
import { setId,getId,removeId } from '@/utils/auth.js'



export default {
  name: 'HelloWorld',
  components:{
    houseItem
  },
  data() {
    return {
      cityId: {},
      city: [],
      nextCity:[],
      house:[],
      show:false,
      houseDetails:[]
    }
  },
  created() {
    
    this.cityId =   JSON.parse(getId('vue-token')) || {"label":"北京","value":"AREA|88cff55c-aaa4-e2e0"}
    console.log(this.cityId);
    this.$toast.loading({
         duration: 0, // 持续展示 toast
        //  forbidClick: true,
         message: "加载中..."
     });
    
    this.getAreaHouse()

    // var map = new BMap.Map('container')
  },
  methods: {
    change(){
      this.$router.push('/findHouse')
    },
    async getAreaHouse() {
      let { body } = await getAreaHouse(this.cityId.value)
      
      this.city = body

     this.getMap()
      
      // console.log(body)
    },
   


    getMap(){
//加载
//  this.$toast.loading({
//          duration: 0, // 持续展示 toast
//         //  forbidClick: true,
//          message: "加载中..."
//      });

 
// this.$toast.loading('加载中')
   var map = new BMap.Map("container");          

var myGeo = new BMap.Geocoder();      
// 将地址解析结果显示在地图上，并调整地图视野    

myGeo.getPoint(this.cityId.label, (point) =>{      

  
  
    if (point) {      
        map.centerAndZoom(point, 11);      
        
    }      

this.city.forEach(item =>{

const label = new BMap.Label('',{
position:new BMap.Point(item.coord.longitude,item.coord.latitude),
  offset:new BMap.Size(30,-30)
})

//清除加载提示
this.$toast.clear()
//第一次点击事件
label.addEventListener('click', async()=>{
  // console.log(item.label);
  // console.log(item.value);

  this.$toast.loading({
         duration: 0, // 持续展示 toast
        //  forbidClick: true,
         message: "加载中..."
     });

   
   let {body} = await getCommunity({
        // name:item.label,
        id:item.value
      })

      this.nextCity =  body
      
    // console.log(body);
    // console.log(this.nextCity+'222');
    
    
  
  map.centerAndZoom(new BMap.Point(item.coord.longitude,item.coord.latitude), 13); 

setTimeout(() => {
  map.clearOverlays()
}, 0);
  
// console.log(222222222);


  // 重新渲染叠层
// this.$toast.loading('加载中')

  this.nextCity.forEach( adress =>{

  // console.log(adress.value+'二级id');
  
  myGeo.getPoint(adress.label, (point) =>{      

    // console.log('111'+adress.label);
    
    // if (point) {      
    //     map.centerAndZoom(point, 11);      
        
    // }      



const label = new BMap.Label('',{
position:new BMap.Point(adress.coord.longitude,adress.coord.latitude),
  offset:new BMap.Size(30,-30)
})


//第二次点击事件 点击事件里面
this.$toast.clear()

label.addEventListener('click', async()=>{


  this.$toast.loading({
         duration: 0, // 持续展示 toast
        //  forbidClick: true,
         message: "加载中..."
     });

let {body} = await getCommunity({
        // name:item.label,
        id:adress.value
      })

    this.house = body
      console.log(body);
      

  map.centerAndZoom(new BMap.Point(adress.coord.longitude,adress.coord.latitude), 16); 

setTimeout(() => {
  map.clearOverlays()
}, 0); 


// 最后渲染
// this.$toast.loading('加载中')

  this.house.forEach( local =>{

  // console.log(adress.value+'二级id');
  
  myGeo.getPoint(local.label, (point) =>{      

    // console.log('111'+adress.label);
    
    // if (point) {      
    //     map.centerAndZoom(point, 11);      
        
    // }      



const label = new BMap.Label('',{
position:new BMap.Point(local.coord.longitude,local.coord.latitude),
  offset:new BMap.Size(30,-30)
})

this.$toast.clear()

//第三次点击事件 点击事件里面

label.addEventListener('click', async()=>{

// let {body} = await getCommunity({
//         // name:item.label,
//         id:adress.value
//       })

    // this.house = body
    //   console.log(body);
      

  // map.centerAndZoom(new BMap.Point(adress.coord.longitude,adress.coord.latitude), 16); 

// setTimeout(() => {
//   map.clearOverlays()
// }, 0); 
this.$toast.loading({
         duration: 0, // 持续展示 toast
        //  forbidClick: true,
         message: "加载中..."
     });


let { body } = await getHousesDetail({cityId:local.value})
// console.log(body);
this.houseDetails = body.list


// console.log(this.houseDetails);
//弹层
this.$toast.clear()

this.show = true


  
})

label.id = local.value
label.setContent(`
<div style="{display:flex;align-item:center}">
  <p style="margin:8px 0px 8px">${local.label}</p>
  <p style="margin:0px">${local.count}套</p>
</div>
`)
label.setStyle({
  color: "black", //字体颜色
          fontSize: "10px", //字体大小
          // padding: "4px 18px",
          padding:"0px",
          backgroundColor: "green", //文本标注背景颜色
          width:"100px",
          height:"40px",
          padding:"0px 30px 11px",
          // display:"flex",
  // justifyContent: "space-between"
          
          borderRadius: "10px",
          border: "0",
          textAlign: "center",
          // fontWeight: "bold" //字体加粗
})

map.addOverlay(label)

  


 }, 
local.label);
} )




//最后渲染


  
})

label.id = adress.value
label.setContent(`
<div >
  <p >${adress.label}</p>
  <p>${adress.count}套</p>
</div>
`)
label.setStyle({
  color: "black", //字体颜色
          fontSize: "13px", //字体大小
          // padding: "4px 18px",
          backgroundColor: "red", //文本标注背景颜色
          width:"80px",
          height:"80px",
          borderRadius: "50%",
          border: "0",
          textAlign: "center",
          fontWeight: "bold" //字体加粗
})

map.addOverlay(label)

  


 }, 
adress.label);
} )

//里面
  
})

label.id = item.value
label.setContent(`
<div >
  <p >${item.label}</p>
  <p>${item.count}套</p>
</div>
`)
label.setStyle({
  color: "black", //字体颜色
          fontSize: "13px", //字体大小
          // padding: "4px 18px",
          backgroundColor: "yellow", //文本标注背景颜色
          width:"80px",
          height:"80px",
          borderRadius: "50%",
          border: "0",
          textAlign: "center",
          fontWeight: "bold" //字体加粗
})

map.addOverlay(label)

  
})

 }, 
this.cityId.label);

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

// map.addControl(new BMap.ScaleControl()); 
// map.addControl(new BMap.NavigationControl());    
   
  

    }
    
  
  

}
}
</script>
 
<style scoped >
.top{
  /* width: 100%; */
  /* position: fixed; */
  height: 100px;
  display: flex;
  align-items: center;
  color: #ffffff;
  /* z-index: 10 */
  background-color: #f6f5f6;
  position: relative;
  
}
.back{
  color: black;
  font-size: 50px
}
.adress{
    color: black;
    font-size: 50px;
    position: absolute;
    left: 250px;
    font-weight: 400
  }
#container {
  width: 100vw;
  height: 94vh;
  /* margin-bottom: 3.125rem; */
}
.box{
  width: 100%;
  height: 100px;
  position: absolute;
  background-color: #dddddd;
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 50px;

}
span{
  padding: 0px 20px
}
.more{
  font-size: 30px;
  font-weight: 400
}
.list{
  margin: 100px 0
}
</style>

